<script type="text/javascript" src="{$jqueryLib}"></script>

<style>
a{
	color:#0b649f;
	text-decoration:none;
}
/* Link Colors Hover */
a:hover {
  /* color: #d5912b; */
  background-color:#d5912b;
}

#region_list dl dt {
	background:#4876FF;
	color:#FFA500;
	float:left;
	font-weight:bold;
	margin-right:10px;
	width:25px;
}

#city_1 {
	margin-left:0;
	width:50%;
	float:right;
}
#region_list dd {
	margin:0 1px 0 0;
	display:inline;
}
#province_list{
	margin-botton:0;
}
#province_list li{
	list-style: none;
	display:block;
	width:70px;
	float: left;
	margin-right:5px;
	margin-bottom: 3px;
}

#province_list a{
	font-size:12px;
}
.red{
	color:#ff0000;
}
font{
	font-size:12px;
}
.pcity{
	display:none;
	background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    left: 0;
    overflow: visible;
    position: fixed;
    top: 33px;
    width: 200px;
    z-index: 2;
}

#show_city{
	display:none; 
	width: 200px;
	position: fixed;
	overflow: visible;
}

</style>
<div id="region_list">
	<h3>主要城市</h3>
	<div id="city_1">
	{foreach from=$mainCities item='cities' key='letter'}
		{if ord($letter) gt 75}
		<dl>
			<dt>{$letter}</dt>
			{foreach from=$cities item='city' key='ck'}
			<dd><a {if $city.isImpCity eq 1}class="red"{/if} href="javascript:"><font class="city">{$city.city}</font></a></dd>
			{/foreach}
			
		</dl>
		{/if}
	{/foreach}
	</div>
	<div id="city_2">
	{foreach from=$mainCities item='cities' key='letter'}
		{if ord($letter) le 75}
		<dl>
			<dt>{$letter}</dt>
			{foreach from=$cities item="city" key="ck"}
			<dd><a {if $city.isImpCity eq 1}class="red"{/if} href="javascript:"> <font class="city">{$city.city}</font></a></dd>
			{/foreach}
			
		</dl>
		{/if}
	{/foreach}
	</div>
	<div id="province_list">
	<h3>所有省份</h3>
	<div id="show_city"></div>
	<ul >
		{foreach from=$provinces item="province" key="pk"}
				<li>
					<a href="javascript:" class="province">{$province.province}</a>
					<div class="pcity" id="province_{$province.provinceID}">
						<ul>
							{foreach from=$province.cities item="city" key="ck"}
							<li><a><font class="city">{$city.city}</font></a></li>
							{/foreach}
						</ul>
					</div>
				</li>

		{/foreach}
	</ul>
	</div>
</div>
<script>
$(document).ready(function(){
	$(".city").click(function(){
		var city   = $(this).text();
		var pframe = parent.parent.document.getElementsByTagName("html");
		var jpframe = $(pframe);
		jpframe.find("input[name='region']").val(city);
		jpframe.find(".close").find("span").click();
	})
	
	$(".province").click(function(){
		var X = $(this).position().top;
		var Y = $(this).position().left; 
		$(".pcity").hide();
		//$("#show_city").find('ul').remove();
		
		$(this).siblings(".pcity").css('top',X+10+'px').css('left',Y+10+'px').toggle();
		//$(this).siblings(".pcity").css('left',Y+'px').toggle();
	})
})
</script>
